<script>
import position from "./position.vue";
import subText from "./subText.vue";
import titleText from "./titleText.vue";
export default {
  name: "Title",
  components: {
    position,
    subText,
    titleText,
  },
  inject: ["father"],
  data() {
    return {
      activeName: "1",
      options: [
        {
          title: "位置",
          name: "1",
          render: () => <position />,
        },
        {
          title: "主文本",
          name: "2",
          render: () => <titleText />,
        },
        {
          title: "副文本",
          name: "3",
          render: () => <subText />,
        },
      ],
    };
  },
  computed: {
    title: {
      get() {
        return this.father.echartsOptions.title;
      },
      set(val) {
        this.father.echartsOptions.title = val;
      },
    },
  },
  mounted() {},
  methods: {},
  render() {
    return (
      <div>
        <el-form-item label="显示">
          <el-switch v-model={this.title.show}></el-switch>
        </el-form-item>
        <el-form-item label="主副标题间隔">
          <el-input-number
            step={1}
            max={99}
            min={0}
            v-model={this.title.itemGap}
          ></el-input-number>
        </el-form-item>
        <el-collapse v-model={this.activeName} accordion>
          {this.options.map((item) => {
            return (
              <el-collapse-item title={item.title} name={item.name}>
                {item.render()}
              </el-collapse-item>
            );
          })}
        </el-collapse>
      </div>
    );
  },
};
</script>

<style scoped>
</style>